<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="data.goods"
    :footData="foot"
    :columns="columns"
  >
    <template #name="{ row }">
      <b>{{ row.goods_name }}</b><br>
      {{ row.goods_data.sname }}
    </template>
    <template #price="{ row }">
      {{ app.money.format(row.price) }}
    </template>
    <template #discount="{ row }">
      {{ Number(row.discount) }}%
    </template>
    <template #tax="{ row }">
      <t-tag theme="primary" variant="light">
        {{ row.goods_data.tax }}%
      </t-tag>
    </template> 
    <template #req="{ row }">
      <t-tag theme="success" variant="light">
        {{ row.goods_data.req }}%
      </t-tag>
    </template> 
    <template #money_tax="{ row }">
      {{ app.money.format(row.money_tax) }}
    </template> 
    <template #money="{ row }">
      {{ app.money.format(row.money) }}
    </template> 

    <template #footCount="{ row }">
      <div style="text-align: center">{{ row.count }}</div>
    </template> 
    <template #footDiscount="{ row }">
      <div style="text-align: center">{{ app.money.format(row.discount_money) }}</div>
    </template> 
    <template #footTaxMoney="{ row }">
      <div style="text-align: center">{{ app.money.format(row.tax_money) }}</div>
    </template> 
    <template #footReqMoney="{ row }">
      <div style="text-align: center">{{ app.money.format(row.req_money) }}</div>
    </template> 
    <template #footMoneyTax="{ row }">
      <div style="text-align: center">{{ app.money.format(row.money_tax) }}</div>
    </template> 
    <template #footMoney="{ row }">
      <div style="text-align: right"><b>{{ app.money.format(row.money) }}</b></div>
    </template> 
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'

  const props = defineProps(['data'])
  const plugin = index.plugin
  const columns = ref([])

  // 底部数据
  const foot = [props.data]

  // 基础固定
  const left = [{
    title: plugin.t('goods.name'),
    colKey: 'name',
    cell: 'name',
    width: 300
  }, {
    title: plugin.t('goods.price'),
    colKey: 'price',
    cell: 'price',
    align: 'center'
  }, {
    title: plugin.t('goods.count'),
    colKey: 'count',
    align: 'center',
    foot: 'footCount'
  }]

  const right = [{
    title: plugin.t('goods.money_tax'),
    colKey: 'money_tax',
    cell: 'money_tax',
    align: 'center',
    foot: 'footMoneyTax'
  }, {
    title: plugin.t('goods.money'),
    colKey: 'money',
    cell: 'money',
    align: 'right',
    foot: 'footMoney'
  }]

  // 附加字段
  const other = []

  // 商品折扣
  if(Number(props.data.discount_money)) {
    other.push({
      title: plugin.t('goods.discount'),
      colKey: 'discount',
      cell: 'discount',
      align: 'center',
      foot: 'footDiscount'
    })
  }

  // 税
  other.push({
    title: plugin.t('goods.tax'),
    colKey: 'tax',
    cell: 'tax',
    align: 'center',
    foot: 'footTaxMoney'
  })

  // 判断是否有个体
  if(Number(props.data.req_money) !== 0) {
    other.push({
      title: plugin.t('goods.req'),
      colKey: 'req',
      cell: 'req',
      align: 'center',
      foot: 'footReqMoney'
    })
  }

  columns.value = [...left, ...other, ...right]
</script>